<template>
  <div id="stationPanel">
    <div class="filter">
      <el-form :inline="true" :model="filterData" class="demo-form-inline">
        <el-form-item label="站点名称" style="width: 280px;">
          <el-input v-model="filterData.stationName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="function">
      <el-row>
        <el-col :span="3">
          <el-button @click="addAfter" icon="el-icon-plus">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="stationList" style="width: 100%">
      <el-table-column label="序号" type="index" width="100" align="center">
      </el-table-column>
      <el-table-column prop="name" label="站点名称" align="center">
      </el-table-column>
      <el-table-column prop="code" label="站点编号" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button @click="updateAfter(scope.row)" type="text" size="small">编辑</el-button>
          <el-popconfirm @confirm="remove(scope.row, scope.$index)" title="这是一段内容确定删除吗？">
            <el-button type="text" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="formConf.title" :visible.sync="formConf.dialogFormVisible" width="30%">
      <el-form :model="formData">
        <el-form-item label="站点名称">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="站点编号">
          <el-input v-model="formData.code" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formConf.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formConf.title == '新 增' ? add() : update()">{{formConf.title}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'StationManager',
    data() {
      return {
        stationList: [],
        filterData: {
          stationName: ''
        },
        formData: {
          id: '',
          name: '',
          code: ''
        },
        currRow: null,
        formConf: {
          title: '新 增',
          dialogFormVisible: false
        }
      }
    },
    methods: {
      getStationList() {
        return axios.get(process.env.BASE_API + '/station/listAll')
      },
      getStationListByName() {
        return axios.get(process.env.BASE_API + '/station/listByStationName/' + this.filterData.stationName)
      },
      removeStation(id) {
        return axios.delete(process.env.BASE_API + '/station/' + id)
      },
      addStation() {
        return axios.post(process.env.BASE_API + '/station', this.formData)
      },
      updateStation() {
        return axios.put(process.env.BASE_API + '/station', this.formData)
      },
      query() {
        let that = this
        if (that.filterData.stationName) {
          that.getStationListByName().then(function(result) {
            if (result.data.code == 200) {
              that.stationList = result.data.data
            }
          })
        } else {
          that.getStationList().then(function(result) {
            if (result.data.code == 200) {
              that.stationList = result.data.data
            }
          })
        }
      },
      addAfter() {
        this.formConf.title = '新 增'
        this.formConf.dialogFormVisible = true
        this.formData.id = ''
        this.formData.name = ''
        this.formData.code = ''
      },
      add() {
        let that = this
        this.formConf.dialogFormVisible = false
        this.addStation().then(function(result) {
          if (result.data.code == 200 && result.data.data.row > 0) {
            that.$message({
              message: '新增成功',
              type: 'success'
            });
          } else {
            that.$message.error('新增失败');
          }
        })
      },
      updateAfter(row) {
        this.currRow = row
        this.formConf.title = '编 辑'
        this.formConf.dialogFormVisible = true
        this.formData.id = row.id
        this.formData.name = row.name
        this.formData.code = row.code
      },
      update() {
        let that = this
        this.formConf.dialogFormVisible = false
        this.updateStation().then(function(result) {
          if (result.data.code == 200 && result.data.data.row > 0) {
            that.currRow.name = that.formData.name
            that.currRow.code = that.formData.code
            that.$message({
              message: '编辑成功',
              type: 'success'
            });
          } else {
            that.$message.error('编辑失败');
          }
        })
      },
      remove(row, index) {
        let that = this
        let id = row.id
        if (id) {
          that.removeStation(id).then(function(result) {
            if (result.data.code == 200 && result.data.data.row > 0) {
              that.stationList.splice(index, 1)
              that.$message({
                message: '删除成功',
                type: 'success'
              });
            } else {
              that.$message.error('删除失败');
            }
          })
        } else {
          that.$message.error('id不能为空');
        }
      }
    },
    created() {
      let that = this
      that.getStationList().then(function(result) {
        that.stationList = result.data.data
      })
    }
  }
</script>

<style>
  #stationPanel {
    padding: 20px;
  }

  .filter {
    border-bottom: 1px solid #DBDDE3;
    margin-bottom: 10px;
  }

  .function {
    margin-bottom: 10px;
  }

  .el-form--inline .el-form-item .el-form-item__label {
    font-size: 14px;
    line-height: 28px;
  }
</style>
